<template>

  <div class="user">
    <!--搜索表单-->
    <div class="common-seach-wrap">
      <el-form size="small" :label-width="50" :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="职业">
          <el-select size="small" v-model="searchForm.career_id" placeholder="请选择">
            <el-option label="全部" :value="0"></el-option>
            <el-option v-for="(item, index) in positionList" :key="index" :label="item.title"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="级别">
          <el-select size="small" v-model="searchForm.level_id" placeholder="请选择">
            <el-option label="全部" :value="0"></el-option>
            <el-option v-for="(item, index) in levelList" :key="index" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select size="small" v-model="searchForm.direction_id" placeholder="请选择">
            <el-option label="全部" :value="0"></el-option>
            <el-option v-for="(item, index) in directionList" :key="index" :label="item.title"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input size="small" maxlength="11" v-model="searchForm.mobile" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="姓名 ">
          <el-input size="small" maxlength="10" v-model="searchForm.userName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select size="small" v-model="searchForm.is_delete" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="开启" :value="0"></el-option>
            <el-option label="关闭" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
          <el-button size="small" type="primary" @click="$router.back()">返回上一级</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="common-content">
      <!--内容-->
      <div class="product-content">
        <div class="table-wrap">
          <el-table size="small" @sort-change="tableSortChange" :data="tableData" stripe style="width: 100%"
            v-loading="loading">
            <el-table-column align="center" min-width="100" prop="mobile" label="手机号"></el-table-column>
            <el-table-column align="center" min-width="100" prop="userName" label="姓名"></el-table-column>
            <el-table-column align="center" min-width="120" prop="career_title" label="职业"></el-table-column>
            <el-table-column align="center" min-width="120" prop="level_title" label="级别"></el-table-column>
            <el-table-column align="center" min-width="120" prop="direction_title" label="职业方向"></el-table-column>
            <!-- <el-table-column align="center" min-width="120" prop="appraisal_title" label="鉴定站"></el-table-column> -->
            <el-table-column align="center" min-width="100" prop="status" label="账号状态">
              <template #default="scope">
                <div class="d-c-c">
                  <div class="active-status" :style="scope.row.is_delete == 1 ? 'background: rgba(0,0,0,0.25)' : ''">
                  </div>
                  <div>{{ scope.row.is_delete == 1 ? '关闭' : '开启' }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="120" prop="days" sortable="'custom'"
              label="未登录天数"></el-table-column>
            <el-table-column align="center" min-width="120" prop="doquestiondate" sortable="'custom'"
              label="最后做题日期"></el-table-column>
            <el-table-column align="center" min-width="120" prop="testdate" sortable="'custom'"
              label="最后考试日期"></el-table-column>
            <el-table-column align="center" min-width="100" prop="playnum" label="视频学习次数"></el-table-column>
            <el-table-column align="center" min-width="100" prop="alreadynum" label="已做题"></el-table-column>
          </el-table>
        </div>

        <!--分页-->
        <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
            :current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
            :total="totalDataNumber"></el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import AuthApi from '@/api/auth.js';
import PositionApi from '@/api/position.js';
import StudentApi from '@/api/student.js';
export default {
  inject: ['reload'],
  data() {
    return {
      sort_field: '',
      sort_order: '',
      /*是否加载完成*/
      loading: true,
      /*列表数据*/
      tableData: [],
      /*一页多少条*/
      pageSize: 10,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      /*横向表单数据模型*/
      formInline: {
        user: '',
        region: ''
      },
      /*是否打开添加弹窗*/
      open_add: false,
      /*是否打开编辑弹窗*/
      open_edit: false,
      /*当前编辑的对象*/
      curModel: {},
      /*角色列表*/
      roleList: [],
      searchForm: {
        career_id: 0,
        level_id: 0,
        direction_id: 0,
        appraisal_id: 0,
        userName: '',
        mobile: '',
        is_delete: ''
      },
      positionList: [], //全部职业
      levelList: [],
      directionList: [],
      appraisalList: [],
      title: ''
    };
  },
  created() {
    // 获取职位列表
    this.getPositionAll()
    this.getLevelAll()
    this.getDirectionAll()
    this.getAppraisalAll()
    /*获取列表*/
    this.getTableList();
  },
  methods: {
    tableSortChange(sortData) {
      console.log(sortData, 'sortData')
      this.sort_field = sortData.prop
      if (sortData.order == 'ascending') {
        this.sort_order = 'asc';
      } else if (sortData.order === 'descending') {
        this.sort_order = 'desc';
      } else {
        this.sort_field = ''
        this.sort_order = ''
      }
      this.curPage = 1;
      this.getTableList();
    },
    downloadStudentTemplate() {
      window.open('https://edu.theshy.site/admin/%E5%AD%A6%E5%91%98%E6%89%B9%E9%87%8F%E4%B8%8A%E4%BC%A0%E6%A8%A1%E7%89%88.xlsx')
    },
    getPositionAll() {
      PositionApi.getNestedData({}, true)
        .then(res => {
          this.positionList = res.data;
        })
        .catch(error => { });
    },
    getLevelAll() {
      PositionApi.getCareerLevel({}, true)
        .then(data => {
          this.levelList = data.data;
        })
        .catch(error => { });
    },
    getDirectionAll() {
      PositionApi.getCareerDirection({}, true)
        .then(data => {
          this.directionList = data.data;
        })
        .catch(error => { });
    },
    getAppraisalAll() {
      PositionApi.getCareerAppraisal({}, true)
        .then(data => {
          this.appraisalList = data.data.list;
        })
        .catch(error => { });
    },
    /*搜索查询*/
    onSubmit() {
      this.curPage = 1;
      this.getTableList();
    },
    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.curPage = val;
      self.loading = true;
      self.getTableList();
    },

    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getTableList();
    },

    /*获取列表*/
    getTableList() {
      let self = this;
      let Params = {
        ...self.searchForm,
        sort_field: this.sort_field,
        sort_order: this.sort_order,
      };
      Params.page = self.curPage;
      Params.list_rows = self.pageSize;
      self.loading = true
      StudentApi.getStatisticsList(Params, true)
        .then(data => {
          console.log(data, '123123');
          self.loading = false;
          // self.roleList = data.data.roleList;
          self.tableData = data.data.list.data;
          self.totalDataNumber = data.data.list.total;
        })
        .catch(error => { });
    },

    /*打开添加*/
    addClick(title = '') {
      this.title = title;
      this.open_add = true;
    },

    /*关闭添加*/
    closeAdd(e) {
      this.open_add = false;
      if (e && e.type == 'success') {
        this.getTableList();
      }
    },

    /*打开编辑*/
    editClick(row) {
      console.log(row, 'row')
      this.open_add = true;
      this.$nextTick(() => {
        this.$refs.studentAdd.setTitle({
          title: row.title,
          id: row.user_id,
          data: row
        })
      })
    },

    /*关闭添加*/
    closeEdit(e) {
      this.open_edit = false;
      if (e && e.type == 'success') {
        this.getTableList();
      }
    },

    /*删除*/
    deleteClick(row) {
      let self = this;
      ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          self.loading = true;
          AuthApi.userDelete(
            {
              shop_user_id: row.shop_user_id
            },
            true
          )
            .then(data => {
              self.loading = false;
              if (data.code == 1) {
                ElMessage({
                  message: '恭喜你，该管理员删除成功',
                  type: 'success'
                });
                //刷新页面
                self.getTableList();
              } else {
                self.loading = false;
              }
            })
            .catch(error => {
              self.loading = false;
            });
        })
        .catch(() => { });
    }
  }
};
</script>

<style>
.active-status {
  width: 5px;
  height: 5px;
  background: #52C41A;
  margin-right: 10px;
  border-radius: 50%;
}
</style>